:root {
  --LogoLoader-transition-ease: cubic-bezier(.175, .885, .320, 1.275);
  --LogoLoader-size: 39px;
}

/* Logo loader */

.logoLoader {
  position: relative;
  display: inline-block;
  width: var(--LogoLoader-size);
  height: var(--LogoLoader-size);
  color: #fff;
  border-radius: 100px;
}

.logoLoader-inverted {
  color: @processing-color;
}

.logoLoader-logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.25s var(--LogoLoader-transition-ease);
  fill: currentColor;
}

.logoLoader-svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: visible;
}

.logoLoader path {
  transform-origin: 50% 50% 0;
}

.logoLoader:hover .logoLoader-z {
  animation: pop 0.3s var(--LogoLoader-transition-ease);
  animation-iteration-count: 2;
  animation-direction: alternate;
}

.logoLoader-z {
  transform: scale(1, 1);
  transition: all 0.25s var(--LogoLoader-transition-ease);
}

.logoLoader .logoLoader-logo {
  transform-origin: 50% 50% 0;
  /*transform: scale(.8, .8);*/
}

.logoLoader .logoLoader-circle, .logoLoader .logoLoader-circlePulse {
  transform: scale(1, 1);
}

.logoLoader.is-loading .logoLoader-z {
  animation: pulseBegin 1s infinite linear;
}

.logoLoader.is-loading .logoLoader-circle {
  animation: pulseBegin 1s infinite linear;
  animation-delay: 0.1s;
}

.logoLoader.is-loading .logoLoader-circlePulse {
  animation: pulse 1s infinite linear;
  animation-delay: 0.1s;
}

@keyframes pulseBegin {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(.6);
  }
  40% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bouncedelay {
  0%, 100%, 90% {
    transform: scale(0, 0);
    opacity: 0.1;
  }
  40% {
    transform: scale(0.05, 0.05);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(.6);
    opacity: 0;
  }
  20% {
    transform: scale(.6);
  }
  40% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  60% {
    transform: scale(1.6);
    opacity: 0.7;
  }
  100% {
    transform: scale(2);
    opacity: 0.0;
  }
}

@keyframes pop {
  to {
    transform: rotate(15deg) scale(1.1, 1.1);
  }
}
